"use client"; // 标记为客户端组件

import { useTheme } from '../layout'; // 确保正确导入 useTheme
import Articles from '../components/Articles';
import HistoricalArticles from '../components/HistoricalArticles';

function ClientComponent({ articles, error }) {
    const { theme } = useTheme(); // 使用客户端的主题状态

    return (
        <div className={`flex flex-col md:flex-row justify-center`}>
            <div className="w-full md:w-[80%] flex flex-col md:flex-row">
                {error ? (
                    <p className="text-center text-red-500">{error}</p>
                ) : (
                    <Articles articles={articles} theme={theme} />
                )}
                <HistoricalArticles articles={articles} theme={theme} />
            </div>
        </div>
    );
}

export default ClientComponent;
